<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>详细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript">
        document.write('<script src="../../js/init.js?rd=?rd=' + Math.random() + '"><\/script>');
    </script>
    <!--css 加入-->
    <script type="text/javascript">
        link(['../../css/mui.min.css', '../../css/icons-extra.css', '../../css/app.css'], true);
    </script>
</head>
<style>
    html, body {
        background-color: #efeff4;
    }

    .mui-bar ~ .mui-content .mui-fullscreen {
        top: 44px;
        height: auto;
    }

    .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
    }

    .mui-bar ~ .mui-pull-top-tips {
        top: 24px;
    }

    .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
    }

    .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }

    .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
                    -webkit-transition-duration: 400ms;
                    transition-duration: 400ms;*/

        margin: 0;
    }

    .mui-pull-top-wrapper .mui-icon, .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
    }

    .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
    }

    .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
    }

    .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }

    .mui-pull-top-canvas canvas {
        width: 40px;
    }

    .mui-slider-indicator.mui-segmented-control {
        background-color: #efeff4;
    }

    #detail_wrap {
        height: 160px;
        background: #fff;
    }

    #detail_wrap .mui-table-view:after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 0px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }


    #detail_wrap .mui-table-view-cell:after {
        height: 0
    }

    #slider {
        top: 160px;
    }
</style>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 id="mui-title" class="mui-title">详细</h1>
    <a class="mui-icon mui-icon-plusempty mui-pull-right"  href="#popover" id="openPopover"></a>
</header>

<div id="popover" class="mui-popover">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="#">Item1</a></li>
        <li class="mui-table-view-cell"><a href="#">Item2</a></li>
        <li class="mui-table-view-cell"><a href="#">Item3</a></li>
        <li class="mui-table-view-cell"><a href="#">Item4</a></li>
        <li class="mui-table-view-cell"><a href="#">Item5</a></li>
    </ul>
</div>

<div class="mui-content">
    <div id="detail_wrap">
        <div class="mui-loading">
            <div class="mui-spinner"></div>
            <div class="mui-loading-msg"> 玩命加载中...</div>
        </div>
    </div>
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile" data-url="/wap/crm/CstTrace/cst_trace_json/">跟进 </a>
                <a class="mui-control-item" href="#item2mobile" data-url="/wap/crm/CstLinkman/cst_linkman_json/">联系人 </a>
                <a class="mui-control-item" href="#item3mobile" data-url="/wap/crm/CstChance/cst_chance_json/">商机 </a>
                <a class="mui-control-item" href="#item4mobile" data-url="/wap/crm/CstLinkman/cst_chance_json/">合同</a>
                <a class="mui-control-item" href="#item5mobile" data-url="/wap/crm/CstLinkman/cst_chance_json/">服务 </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" data-pagenum='1' data-tplid="item1mobile_tpl">

                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" data-pagenum='1' data-tplid="item2mobile_tpl">
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" data-pagenum='1' data-tplid="item3mobile_tpl">
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item4mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" data-pagenum='1' data-tplid="item4mobile_tpl">
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item5mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" data-pagenum='1' data-tplid="item5mobile_tpl">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="detail_view">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <div class="mui-media-body">
                        <div class="mui-row">
                            <div class="mui-col-xs-10">
                                <p class="tit"><%=data['name']%></p>
                                <p class="mui-ellipsis">跟进时间：<%=data['conn_time']%></p>
                                <p class="mui-ellipsis font-info">
                                    <% if(data['next_time']!='0000-00-00 00:00:00') { %>
                                    下次联系：<%=data['next_time']%>
                                    <% } %>
                                </p>
                                <p><%=data['mobile']%></p>
                            </div>
                            <div class="mui-col-xs-2">
                                <p><%=data['grade']%></p>
                                <p><%=data['linkman']%></p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>

</script>
<script type="text/html" id="item1mobile_tpl">
    <% for(var i=0;i<list.length;i++) { %>
    <li class="mui-table-view-cell" data-id="<%=list[i]['id']%>">
        <div class="mui-media-body mui-row">
            <div class="mui-col-xs-10">
                <p class="tit2"><%=list[i]['linkman']['name']%></p>
                <p class="mui-ellipsis"><%=list[i]['conn_time']%> <%=list[i]['salemode_name']%></p>
                <p class="mui-ellipsis"><%=list[i]['intro']%></p>
                <p class="mui-ellipsis font-info">
                    <% if(list[i]['next_time']!='0000-00-00 00:00:00') { %>
                    下次联系：<%=list[i]['next_time']%>
                    <% } %>
                </p>
            </div>
            <div class="mui-col-xs-2 mui-text-right">
                <p><%=list[i]['salestage_name']%></p>
            </div>
        </div>
    </li>
    <% } %>
</script>

<script type="text/html" id="item2mobile_tpl">
    <% for(var i=0;i<list.length;i++) { %>
    <li class="mui-table-view-cell" data-id="<%=list[i]['id']%>">
        <div class="mui-media-body mui-row">
            <div class="mui-col-xs-6">
                <p class="tit2">
                    <%=list[i]['name']%>
                    <span class="sub">(
                        <% if(list[i]['gender']=='1') { %>
                                   男
                         <% }else{ %>
                                女
                        <%}%>)
                    </span>
                </p>
                <p class="mui-ellipsis">职位：<%=list[i]['postion']%></p>
            </div>
            <div class="mui-col-xs-6 mui-text-right">
                <p><%=list[i]['mobile']%></p>
            </div>
        </div>
    </li>
    <% } %>
</script>

<script type="text/html" id="item3mobile_tpl">
    <% for(var i=0;i<list.length;i++) { %>
    <li class="mui-table-view-cell" data-id="<%=list[i]['id']%>">
        <div class="mui-media-body mui-row">
            <div class="mui-col-xs-6">
                <p class="tit2"><%=list[i]['name']%></p>
                <p class="mui-ellipsis">预计签单金额：<%=list[i]['money']%></p>
                <p class="mui-ellipsis">预计签单时间：<%=list[i]['bill_date']%></p>
            </div>
            <div class="mui-col-xs-6 mui-text-right">
                <p><%=list[i]['salestage_name']%></p>
                <p><%=list[i]['linkman']['name']%></p>
            </div>
        </div>
    </li>
    <% } %>
</script>



<script type="text/javascript">
    script(['../../js/mui.pullToRefresh.js', '../../js/mui.pullToRefresh.material.js', '../../js/crm/cst_customer_view.js']);
</script>
</html>